<template>
  <el-dialog :before-close="close_Change" title="集群配置" v-model="dialogVisible" width="60%">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="220px" style="margin-top: 5px">
        <el-button-group>
          <el-button type="success" @click="submit_form('post')" icon="add-location" size="mini"
            style="margin-left: 5px">新增
          </el-button>
          <el-button type="primary" @click="submit_form('put')" icon="edit" size="mini"></el-button>
          <el-button type="danger" @click="delete_host_conf" size="mini" icon="delete"></el-button>
        </el-button-group>
        <el-table :cell-style="{ padding: 0 }" ref="singleTable" :data="conf_data_list" highlight-current-row
          @current-change="handleCurrentChange" style="font-size: 10px; width: 100%">
          <el-table-column property="kubernetes_cluster_name" show-overflow-tooltip label="集群名称" width="80">
          </el-table-column>
          <el-table-column show-overflow-tooltip property="env_name" label="环境" width="80">
          </el-table-column>
          <el-table-column show-overflow-tooltip property="kubernetes_cluster_comment" label="备注" width="50">
          </el-table-column>
        </el-table>
      </el-aside>
      <el-main>
        <el-form ref="conf_from_ref" :model="conf_from" label-width="80px" size="mini" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属环境" prop="env_id">
                <el-select v-model="conf_from.env_id" placeholder="Select">
                  <el-option v-for="item in env_select_data" :key="item.env_id" :label="item.env_name"
                    :value="item.env_id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="集群名称" prop="kubernetes_cluster_name">
                <el-input v-model="conf_from.kubernetes_cluster_name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="网络组件" prop="kubernetes_cluster_network_component">
                <el-radio-group v-model="conf_from.network_component">
                  <el-radio label="flannel">Flannel</el-radio>
                  <el-radio label="calico">Calico</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="运行时" prop="kubernetes_cluster_runtime">
                <el-radio-group v-model="conf_from.kubernetes_runtime">
                  <el-radio label="docker">Docker</el-radio>
                  <el-radio label="containerd">Containerd</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="版本" prop="kubernetes_cluster_versions">
                <el-radio-group v-model="conf_from.kubernetes_versions">
                  <el-radio label="1.23.0">1.23.0</el-radio>
                  <el-radio label="1.26.0">1.26.0</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="0" justify="center">
              <el-col :span="8">
                <el-form-item label="SApi" prop="control_plane_endpoint">
                  <el-input v-model="conf_from.control_plane_endpoint" placeholder="controlPlaneEndpoint"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item label=":" prop="control_plane_endpoint_port" label-width="26px">
                  <el-input v-model="conf_from.control_plane_endpoint_port"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="SApi IP" prop="control_plane_endpoint_ip">
                  <el-input v-model="conf_from.control_plane_endpoint_ip"
                    placeholder="controlPlaneEndpoint为域名时VIP地址"></el-input>
                </el-form-item>
              </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label=" 服务子网" prop="service_subnet">
                <el-input v-model="conf_from.service_subnet"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="pod子网" prop="pod_subnet">
                <el-input v-model="conf_from.pod_subnet"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="kubernetes_cluster_comment">
                <el-input v-model="conf_from.kubernetes_cluster_comment"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item>
                <el-collapse v-model="activeNames" @change="handleChange">
                  <el-collapse-item title="管理需求文件" name="1">
                    <el-tabs v-model="editableTabsValue" type="card">
                      <el-tab-pane :key="item.conf_manage_name" v-for="item in install_conf"
                        :label="item.conf_manage_name" :name="item.conf_manage_name">
                        <div style="margin-bottom: 10px">
                          <el-input placeholder="请输入内容" v-model="item.conf_manage_path">
                            <template #prepend>配置文件路径</template>
                          </el-input>
                        </div>
                        <el-input type="textarea" :rows="15" placeholder="请输入内容" v-model="item.conf_manage_content">
                        </el-input>
                      </el-tab-pane>
                    </el-tabs>
                  </el-collapse-item>
                </el-collapse>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close_Change" size="mini">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import * as Request from "../../general/request";
import { ElMessage } from "element-plus";
import { watch, ref, onMounted } from "vue";

export default {
  name: "conf_dialog",
  emits: ["childClick"],
  props: {
    soft_id: Number,
    in_value: Boolean,
    props_title_name: String,
  },
  setup(props, { emit }) {
    let editableTabsValue = ref("1");
    let env_select_data = ref([]);
    let conf_from_ref = ref(null);
    let install_conf = ref({
      conf_manage_path: "",
      conf_manage_ids: "",
      conf_manage_content: "",
      conf_manage_nick: "",
      conf_manage_name: "",
    });
    let conf_data = ref({});
    let conf_from = ref({
      control_plane_endpoint: "",
      control_plane_endpoint_port: "6443",
      service_subnet: "10.96.0.0/12",
      pod_subnet: "10.244.0.0/16",
      network_component: "flannel",
      kubernetes_cluster_name: "",
      kubernetes_runtime: "containerd",
      kubernetes_versions: "1.26.0",
      env_id: "",
    });
    let rules = ref({
      kubernetes_cluster_name: [
        { required: true, message: "请输入集群名称", trigger: "blur" },
        { min: 2, max: 10, message: "长度在 2 到 10 个字", trigger: "blur" },
      ],
      env_id: [
        { required: true, message: "请选择所属环境", trigger: "change" },
      ],
      control_plane_endpoint: [
        { required: true, message: "请输入SAPI IP", trigger: "blur" },
      ]
    });
    let conf_text_swap = ref("");
    let conf_data_list = ref([]);
    let conf_manage_ids = ref("");
    let click_kubernetes_cluster_id = ref("");
    let dialogVisible = ref(props.in_value);

    const handleCurrentChange = (e) => {
      if (e) {
        conf_manage_ids.value = e.conf_manage_ids;
        click_kubernetes_cluster_id.value = e.kubernetes_cluster_id;
        get_k8s_conf();
      }
    };

    const close_Change = () => {
      dialogVisible.value = false;
      emit("childClick");
    };

    const conf_type_CodeClick = (e) => {
      conf_from.value.conf_manage_code = e;
    };

    watch(props, (new_val) => {
      dialogVisible.value = new_val.in_value;
      if (new_val.in_value) {
        // get_host_confs
        get_k8s_conf_list();
      }
      // if (new_val.app_id !== app_id_.value){
      //   app_id_.value = new_val.app_id
      //   // get_host_confs()
      // }
    });

    const submit_form = (action) => {
      conf_from_ref.value.validate((valid) => {
        // 验证提交
        if (!valid) {
          return false;
        } else {
          conf_data.value = {
            kubernetes_clustert_data_dict: conf_from.value,
            k8s_role_deploy_conf: install_conf.value,
          };
          if (action === "post") {
            post_k8s_conf();
          } else {
            put_k8s_conf();
          }
        }
      });
    };

    const get_k8s_conf_file_requirement = async () => {
      const response = await Request.GET(
        "/background/home/deploy/get_install_confs",
        { sys_code_type: "k8s_deploy_type" }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          install_conf.value = return_data.data;
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_k8s_conf_list = async () => {
      const response = await Request.GET(
        "/background/home/deploy/k8s_conf_list"
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          conf_data_list.value = return_data.data;
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_env = async () => {
      const response = await Request.GET(
        "/background/home/resource_management/host_group_manage"
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          env_select_data.value = return_data.data;
          // ElMessage.success(return_data.msg)
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const get_k8s_conf = async () => {
      const response = await Request.GET("/background/home/deploy/k8s_conf", {
        kubernetes_cluster_id: click_kubernetes_cluster_id.value,
      });
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          // conf_text_swap.value = return_data.data.conf_text
          conf_from.value = return_data.data.kubernetes_clustert_data_dict;
          let install_conf_i = 0;
          let if_now_install_conf = [];
          while (install_conf.value[install_conf_i]) {
            let k8s_role_deploy_conf_i = 0;
            if (return_data.data.k8s_role_deploy_conf.length) {
              while (
                return_data.data.k8s_role_deploy_conf[k8s_role_deploy_conf_i]
              ) {
                if (
                  install_conf.value[install_conf_i].conf_manage_name ===
                  return_data.data.k8s_role_deploy_conf[k8s_role_deploy_conf_i]
                    .conf_manage_name
                ) {
                  install_conf.value[install_conf_i] =
                    return_data.data.k8s_role_deploy_conf[
                    k8s_role_deploy_conf_i
                    ];
                }
                k8s_role_deploy_conf_i++;
              }
            } else {
              if_now_install_conf.push({
                conf_manage_nick:
                  install_conf.value[install_conf_i].conf_manage_nick,
                conf_manage_name:
                  install_conf.value[install_conf_i].conf_manage_name,
              });
            }
            install_conf_i++;
          }
          if (if_now_install_conf.length) {
            install_conf.value = if_now_install_conf;
          }

          // install_conf.value = return_data.data.k8s_role_deploy_conf
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const post_k8s_conf = async () => {
      const response = await Request.POST(
        "/background/home/deploy/k8s_conf",
        conf_data.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          await get_k8s_conf_list();
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const put_k8s_conf = async () => {
      const response = await Request.PUT(
        "/background/home/deploy/k8s_conf",
        conf_data.value
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          conf_text_swap.value = return_data.data.conf_text;
          ElMessage.success(return_data.msg);
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    const delete_host_conf = async () => {
      const response = await Request.DELETE(
        "/background/home/deploy/k8s_conf",
        {
          kubernetes_cluster_id: click_kubernetes_cluster_id.value,
          conf_manage_ids: conf_manage_ids.value,
        }
      );
      if (response && response.data) {
        var return_data = response.data;
        if (return_data.success) {
          ElMessage.success(return_data.msg);
          await get_k8s_conf_list();
        } else {
          ElMessage.error(return_data.msg);
        }
      }
    };

    onMounted(get_env);
    onMounted(get_k8s_conf_file_requirement);

    return {
      conf_text_swap,
      conf_data_list,
      conf_from,
      handleCurrentChange,
      dialogVisible,
      conf_type_CodeClick,
      delete_host_conf,
      close_Change,
      get_k8s_conf_list,
      props,
      rules,
      submit_form,
      conf_from_ref,
      editableTabsValue,
      install_conf,
      env_select_data,
      get_env,
    };
  },
};
</script>

<style scoped>
.el-row {
  margin-bottom: 0px;
}
</style>
